@import "../../../colors";
@import "../../../frameless";

.feature-top-banner {
    display: flex;
    position: relative;
    background-color: $ui-blue;
    // background-image: url("/images/feature/bg-pattern.png");
    background-size: cover;
    padding: 0;
    min-height: 22rem;
    // overflow: hidden; // if banner shouldn't have things that break the edges
    justify-content: center;

    .feature-top-container {
        z-index: 1;
        justify-content: center;
        align-items: flex-start;
        min-height: 20rem;
        max-width: 55%;
    }

    .feature-banner-images {
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        justify-content: space-between;
    }

    .feature-banner-image {
        display: flex;
        align-self: flex-end;

        img {
            max-width: 100%;
            height: auto;
            align-self: flex-end;
        }

        &.left {
            margin: auto 0;
            width: 14rem;
        }

        &.right {
            width: 50%;
            justify-content: flex-end;
        }
    }

    .feature-header,
    .feature-copy,
    .feature-call-to-action {
        color: $ui-white;
    }

    .feature-header {
        margin-bottom: .75rem;
        font-size: 4rem;
        line-height: 4.2rem;
        max-width: 570px; // Ensure that launch title wraps before 'is'
    }

    .feature-copy {
        font-size: 1.3rem;
    }

    .feature-call-to-action {
        border-radius: 4px;
        background-color: $ui-dark-orange;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        
        &:before {
            display: inline-block;
            margin-right: .5rem;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            background-image: url("/svgs/feature/create-icon.svg");
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: -.35rem;
            content: "";
        }
    }
}

@media only screen and (min-width: $desktop) {
    .feature-banner-image {
        &.right:after {
            display: block;
            position: absolute;
            bottom: -42px;
            right: 33%;
            background-image: url("/svgs/feature/tapping-block.svg");
            background-repeat: no-repeat;
            width: 122px;
            height: 81px;
            content: "";
        }
    }
}

@media only screen and (min-width: $tablet) {
    .feature-top-banner {
        margin-bottom: 80px; // double the normal banner 40px for the notch
        
        &:after{
            display: block;
            position: absolute;
            bottom: -46px;
            left: 48px;
            background-image: url("/svgs/feature/banner-notch.svg");
            background-repeat: no-repeat;
            width: 433px;
            height: 56px;
            content: "";
        }
        
        .feature-top-container {
            transform: translateX(-15%);
        }
    }
}


@media only screen and (max-width: $desktop - 1) {
    .feature-top-banner {
        .feature-header {
            text-align: left; // override #view text centering
        }
    }
}

@media only screen and (min-width: $mobile) and (max-width: $desktop - 1) {
    .feature-top-banner {
        justify-content: flex-start;
        
        .feature-header {
            text-align: left; // override #view text centering
        }
        
        .feature-banner-images {
            justify-content: flex-end;
        }
        
        .feature-top-container {
            transform: translateX(10%);
        }
        
        .feature-banner-image {
            &.left {
                display: none;
            }
        }
    }
}

@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
    .feature-top-banner {
        .feature-banner-images {
            overflow: hidden; // make sure overflow is hidden to avoid scrolling with translated content
        }

        .feature-banner-image {
            &.right {
                width: 80%;
                transform: translateX(10%);
            }
        }
    }
}

@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
    .feature-top-banner {
        .feature-banner-image {
            &.right {
                width: 100%;
                transform: translateX(30%);
            }
        }
    }
}

@media only screen and (max-width: $mobile - 1) {
    .feature-top-banner {
        overflow: hidden;
        min-height: 32rem;
        
        .feature-top-container {
            right: 0;
            left: 0;
            min-height: 30rem;
            max-width: 100%;
            justify-content: flex-start;
            align-items: center;
        }
        
        .feature-header {
            margin: 2rem 0;
            text-align: center;
        }
        
        .feature-banner-image {
            &.right {
                margin-right: 0;
                margin-bottom: -4rem;
                width: 100%;
            }
        
            &.left {
                margin-bottom: .5rem;
                display: block;
                width: 25%;
            }
        }
    }
}

